<template>
  <div class="password-card card-item">
    <el-avatar class="avatar-info">{{ passwordItem.title.charAt(0) }}</el-avatar>

    <div class="title-info">
      <span>{{ passwordItem.title }}</span>
      <span>{{ passwordItem.username }}</span>
    </div>

    <div class="button-info">
      <el-button type="primary" :icon="Edit" circle
                 @click="editClick"/>
      <el-button type="danger" :icon="DeleteFilled" circle
                 @click="deleteClick()" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, DeleteFilled } from '@element-plus/icons-vue'
import { usePasswordStore } from '@/store/password.ts'
import { defineProps, onMounted, PropType } from 'vue'
import { commonElMessageBox } from 'vue3-common/utils/elUtil'
import { useRouter } from 'vue-router'
import { IPassword } from '@/types/password.ts'

const passwordStore = usePasswordStore()
const router = useRouter()

const props = defineProps({
  passwordItem: {
    required: true,
    type: Object as PropType<IPassword>
  }
})

onMounted(() => {

})

const editClick = async () => {
  const id = props.passwordItem?.id
  passwordStore.passwordApiType = 'UPDATE'

  passwordStore.currentPassword = props.passwordItem as IPassword
  await router.push({ name: 'PasswordDetailId', params: { id } })
}

const deleteClick = () => {
  passwordStore.passwordApiType = 'DELETE'
  commonElMessageBox(`请确认是否删除该密码记录: ${props.passwordItem?.title}?`).then(() => {
    passwordStore.handlePasswordApi(props.passwordItem as IPassword)
  })
}
</script>

<style lang="scss">
.password-card {
  padding: 10px;

  display: grid;
  grid-template-columns: 40px 1fr 80px;
  align-items: center;
  gap: 10px;

  .avatar-info {
    background-color: var(--el-color-primary);
  }

  .title-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
}
</style>
